<template>
  <div>
      <h1>首页</h1>
      <!-- 使用方式一 -->
      <!-- <h1>{{ $store.state.name }}</h1> -->
      <!-- 使用方式二 -->
      <h1>{{ state.name }}</h1>
      <button @click="add">number 的值是：{{number}}</button>
      <h3>count的值：{{state.count}}</h3>
  </div>
</template>

<script>
import {ref,onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
    setup(){
        const store = useStore()
        const state = ref(store.state)
        const number = ref(0)
        const add = () => {
            number.value = number.value+1
            store.commit('increment')
        }
        onMounted(() => {
            console.log('number 的值是：'+number.value);
            console.log('count 的值是：'+state.value.count);
        })
        return{
            number,
            add,
            state
        }
    }
}
</script>

<style>

</style>